<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">当前位置：分销后台>
          <router-link to="/personalCenter" style="color: #409eff;">个人中心</router-link>
        </div>         <div class="hei10"></div>

        <div class="title">个人信息</div>

        <div class="con" v-if="shop">

          <el-form ref="form" @submit.native.prevent :model="form" label-width="120px">

            <el-form-item label="店铺名">

              <el-input style="width: 250px;" disabled v-model="form.name"></el-input>

            </el-form-item>

            <el-form-item label="公司名">

              <div class="flex">

                <el-input disabled style="width: 250px;" v-model="form.com">

                </el-input>

                <!-- <el-button type="text"  @click="xiugais('gongsiming')" v-if="form.com">修改</el-button> -->

                <el-button type="text" style="width: 250px;" @click="xiugais('gongsiming')" v-if="!form.com">填写</el-button>

              </div>

            </el-form-item>

            <el-form-item label="负责人">

              <el-input disabled style="width: 250px;" v-model="form.real_name"></el-input>

            </el-form-item>

            <el-form-item label="地区">

              <el-input disabled style="width: 250px;" v-model="form.address"></el-input>

            </el-form-item>

            <el-form-item label="手机号">

              <div class="flex">

                <el-input disabled style="width: 250px;" v-model="form.mobile">

                </el-input>

                <el-button type="text" @click="xiugais('shoujihao')">修改</el-button>

              </div>

            </el-form-item>

            <el-form-item label="密码">

              <div class="flex">

                <el-input disabled style="width: 250px;" value="****"></el-input>

                <el-button type="text" @click="xiugais('mima')">修改</el-button>

              </div>

            </el-form-item>


            <el-form-item label="敢探号密钥" v-if="huoqu == 1">

              <el-button type="primary" plain @click="huoqu = 2">获取敢探号密钥</el-button>

            </el-form-item>

            <el-form-item label="敢探号密钥" v-if="huoqu == 2">

              <div class="flex">

                <el-input v-model='inputpwd' placeholder="请输入登录密码" show-password style="width: 250px;">

                </el-input>

                <el-button type="primary" plain @click='getpwdtoken'>确定</el-button>

                <div v-show="havetoken">
                  <div>

                    aes_key:*********************  <i class="el-icon-document-copy" style="margin-left: 20px; font-size: 18px; color: #409eff;" @click="copy('aes_key:'+aes_key)"></i>

                  </div>
                  <div>

                    api_token:********************* <i class="el-icon-document-copy" style="margin-left: 20px; font-size: 18px; color: #409eff;" @click="copy('api_token:'+nowtoken)"></i>

                  </div>

                  <div>

                    share_id:********************* <i class="el-icon-document-copy" style="margin-left: 20px; font-size: 18px; color: #409eff;" @click="copy('share_id:'+nowshareid)"></i>

                  </div>

                </div>



              </div>

            </el-form-item>

            <el-form-item label="更新回调地址">

              <div class="flex">

                <el-input style="width: 250px;" v-model="huidiaourl">

                </el-input>

                <el-button type="text" @click="shezhi">更新回调地址</el-button>

              </div>

            </el-form-item>

            <el-form-item label="删除黑名单" v-if="shop_id ==304676">

              <div class="flex">

                <el-input style="width: 250px; margin-right: 20px;" v-model="heimingdan.mobile" placeholder="黑名单手机号">

                </el-input>

                <el-input style="width: 250px; margin-right: 20px;" v-model="heimingdan.idnumber" placeholder="黑名单身份证">

                </el-input>

                <el-button type="danger" size="mini" @click="shanchuheimingdan">删除黑名单</el-button>
              </div>

            </el-form-item>

            <!--            <el-form-item label="">

              <el-button type="danger" size="mini" @click="fixpersongo">修改信息</el-button>

            </el-form-item> -->



          </el-form>
          <el-button type="primary" style="margin-left:120px;" plain @click="zhuxiaokai()">注销</el-button>
        </div>

        <div class="con" style="padding: 50px; color: #000;" v-if="!shop">

          <div class="kflexc" style="margin-bottom: 20px;">
            <div class="f1">账户名</div>
            <div class="f2" style="color: rgb(88, 88, 88); width: 120px;">{{form.name}}</div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div class="f1">使用者</div>
            <div class="f2" style="color: rgb(88, 88, 88); width: 120px;">{{form.real_name}}</div>
            <el-button type="text" @click="xiugais2('real_name')">修改</el-button>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div class="f1">手机号</div>
            <div class="f2" style="color: rgb(88, 88, 88); width: 120px;" v-if="form.mobile">{{form.mobile}}</div>
            <el-button type="text" @click="xiugais2('shoujihao')" v-if="form.mobile">修改</el-button>

            <div class="f2" style="color: rgb(88, 88, 88); width: 120px;" v-if="!form.mobile">未绑定</div>
            <el-button type="text" @click="xiugais2('shoujihao')" v-if="!form.mobile">绑定</el-button>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div class="f1">密码</div>
            <div class="f2" style="color: rgb(88, 88, 88); width: 120px;">******</div>
            <el-button type="text" @click="xiugais2('mima')">修改</el-button>
          </div>



          <!-- <el-form ref="form" @submit.native.prevent :model="form" label-width="120px">

            <el-form-item label="账户名">

              <el-input disabled v-model="form.name"></el-input>

            </el-form-item>

            <el-form-item label="真实姓名">

              <el-input disabled v-model="form.real_name"></el-input>

            </el-form-item>

            <el-form-item label="手机号">

              <el-input disabled v-model="form.mobile"></el-input>

            </el-form-item>

            <el-form-item label="密码">

              <el-input disabled placeholder="输入新密码" v-model="form.pass"></el-input>

            </el-form-item>

          </el-form> -->

        </div>

      </div>

    </div>

    <!-- <foot></foot> -->

    <xiugai v-if="log2" ref="xiugai" @xiugaiwanbi="xiugaiwanbi" :xiugaishenme='xiugaishenme'></xiugai>


    <el-dialog :title="tit" :visible.sync="log" :close-on-click-modal="false" width="340px">
      <div>
        <div style="position: relative; margin-bottom: 20px; width: 300px;">
          <el-input v-model="form.mobile" disabled="" placeholder="输入验证码"></el-input>
        </div>
        <div style="margin-bottom: 20px; position: relative; width: 300px;">
          <el-input v-model="code" placeholder="输入验证码"></el-input>
          <el-button style=" position: absolute; right: 0px; top: 0px;" type="danger" @click="getcode":disabled="jinyong">{{tishi}}</el-button>
        </div>
        <div style="margin-bottom: 20px;" v-if="xiugaishenme == 'gongsiming'">
          <el-input v-model="gongsiming" placeholder="输入公司名"></el-input>
        </div>
        <div style="margin-bottom: 20px;" v-if="xiugaishenme == 'shoujihao'">
          <el-input v-model="shoujihao" placeholder="输入手机号"></el-input>
        </div>
        <div style="margin-bottom: 20px;" v-if="xiugaishenme == 'mima'">
          <el-input v-model="mima" show-password placeholder="输入新密码"></el-input>
        </div>
        <div style="margin-bottom: 20px;" v-if="xiugaishenme == 'mima'">
          <el-input v-model="mima2" show-password placeholder="重复输入新密码"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="fixpersongo" v-if="xiugaishenme == 'gongsiming'">修改
        </el-button>
        <el-button type="primary" size="small" @click="fixpersongo2" v-if="xiugaishenme == 'shoujihao'">修改
        </el-button>
        <el-button type="primary" size="small" @click="fixpersongo3" v-if="xiugaishenme == 'mima'">修改
        </el-button>
      </span>
    </el-dialog>

    <el-dialog title="注销核实" center :visible.sync="logzhuxiao" :close-on-click-modal="false" width="500px">
      <div>

        <div style="margin-bottom: 20px;" >
          <el-input v-model="zhuxiao.password"  style="width: 100%;" show-password placeholder="请输入密码"></el-input>
        </div>

        <div class="kflexbc" style="margin-bottom: 20px;">
          <div style="color: rgb(174, 174, 174);">您店铺绑定的手机号：{{form.mobile}}</div>
          <div @click="getcode('zhuxiao')"  v-if="!jinyong" style="color: rgb(0, 128, 255); cursor: pointer;">{{tishi}}</div>
          <div v-if="jinyong" style="color: rgb(174, 174, 174);">{{tishi}}</div>
        </div>

        <div style="margin-bottom: 20px;">
          <el-input v-model="zhuxiao.code"  style="width: 100%;" placeholder="输入验证码"></el-input>
        </div>

        <div style="color: #2974FF">注销店铺后，该店铺所有子账号都将无法再登录，此操作不可撤销！</div>

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round size="small" @click="zhuxiaogo" >确认注销</el-button>
      </span>
    </el-dialog>
  </div>
</template>



<script>
  import axios from 'axios'

  import top from '@/components/top.vue'

  import left from '@/components/left.vue'

  import foot from '@/components/foot.vue'

  import xiugai from './zujian/xiugai.vue'

  export default {

    components: {

      "left": left,

      "top": top,

      "foot": foot,
      xiugai

    },

    name: "personalCenter",

    data() {

      return {
        huoqu:1,
        logzhuxiao:false,
        zhuxiao:{},

        log2:false,
        tit:"修改信息",
        heimingdan: {
          mobile: "",
          idnumber: ""
        },
        //

        havetoken: false,

        inputpwd: '',

        nowtoken: '',
        aes_key:"",

        nowshareid: '',

        //

        xiugaishenme: "",

        gongsiming: "",

        shoujihao: "",

        mima: "",

        mima2: "",

        code: "",

        log: false,

        shop: false,

        count: 60,

        tishi: "获取验证码",

        jinyong: false,

        form: {

          name: "",

          real_name: "",

          mobilezhen: "",

          mobile: "",

          pass: "",

          id: "",

          address: ""

        },

        showform: {

          name: "",

          real_name: "",

          mobile: "",

          pass: "",

          id: ""

        },

        huidiaourl: "",
        shop_id: ""

      }

    },

    created() {

      this.shop_id = JSON.parse(localStorage.getItem('SHOP')).shop_id

      this.huidiaourl = JSON.parse(localStorage.getItem('USER')).notify_url



      var that = this

      axios.get('/api/gth/user/shop')

        .then(response => {

          if (response.data.msg.code == 0) {

            //判断自己是不是子用户

            var user = JSON.parse(localStorage.getItem('USER'));

            if (response.data.data.shop_id == user.id) {

              that.shop = true

            }

          } else {

            if (response.data.msg.code == 50401) {

              that.$router.push({

                path: "/login"

              });

              return false

            }

            that.$message.error(response.data.msg.info);

          }

        })

      this.chushihua()





    },

    mounted() {



    },

    methods: {
      copy(item) {
        const that = this;
        this.$copyText(item).then(
          res => {
            this.$message.success("复制成功");
          },
          err => {
            this.$message.error("复制失败");
          }
        );
      },
      zhuxiaokai:function(){
        this.logzhuxiao = true
      },
      zhuxiaogo:function(){
        axios.post("/api/plan-market/shop/log/off", {
          mobile:this.form.mobilezhen,
          sms_code:this.zhuxiao.code,
          passwd:this.zhuxiao.password
        })

          .then(response => {

            if (response.data.msg.code == 0) {

              this.$message({

                message: '注销成功',

                type: 'success'

              });

              axios.get('/api/auth/logout')
                .then(response => {
                  this.$router.push({
                    path: "/login"
                  });
                })
            } else {

              this.$message.error(response.data.msg.info);

            }

          })
      },
      xiugaiwanbi:function(){
        this.log2 = false
        this.chushihua()
      },

      xiugais2: function(shenme) {
        this.xiugaishenme = shenme
        console.log(this.xiugaishenme)
        this.log2 = true
        this.$nextTick(()=>{
          this.$refs.xiugai.log = true
        })
      },

      shanchuheimingdan: function() {
        axios.post("/api/tool/remove/black", this.heimingdan)

          .then(response => {

            if (response.data.msg.code == 0) {

              this.$message({

                message: '删除黑名单完成',

                type: 'success'

              });

            } else {

              this.$message.error(response.data.msg.info);

            }

          })

      },

      shezhi: function() {

        this.$confirm('确定要更新回调地址吗?', '提示', {

          confirmButtonText: '确定',

          cancelButtonText: '取消',

          type: 'warning'

        }).then(() => {

          axios.post("/api/plan-market/notify/url", {

              url: this.huidiaourl

            })

            .then(response => {

              if (response.data.msg.code == 0) {

                this.$message({

                  message: '回调地址设置完成！',

                  type: 'success'

                });

              } else {

                this.$message.error(response.data.msg.info);

              }

            })

        })



      },

      getpwdtoken() {



        var that = this

        axios.post("/api/plan-market/user/token", {

            password: this.inputpwd

          })

          .then(function(response) {

            console.log(response)

            that.nowtoken = response.data.data.api_token
            that.aes_key = response.data.data.aes_key

            that.nowshareid = response.data.data.share_id.toString()

            that.havetoken = true

          })

      },

      chushihua: function() {

        var that = this

        axios.get("/api/auth/me")

          .then(function(response) {

            if (response.data.msg.code == 0) {

              that.form.id = response.data.data.id

              that.form.name = response.data.data.name

              that.form.address = response.data.data.address

              that.form.com = response.data.data.com

              that.form.mobilezhen = response.data.data.mobile

              var name = response.data.data.real_name

              var n1 = name.substring(0, 1)

              var n2 = name.substr(name.length - 1, 1)

              var n3 = "";

              for (var i = 0; i < name.length - 2; i++) {

                n3 = n3 + "*"

              }

              if (name.length > 2) {

                that.form.real_name = n1 + n3 + n2



                that.showform.real_name = n1 + n3 + n2

              } else {

                that.form.real_name = n1 + "*"

                that.showform.real_name = n1 + "*"

              }



              if (response.data.data.mobile != null) {

                var mobile = response.data.data.mobile.toString()

                var m1 = mobile.substring(0, 4)

                var m2 = mobile.substring(8, 11)

                that.form.mobile = m1 + "****" + m2



                that.showform.mobile = m1 + "****" + m2

              }



            } else {

              that.$message.error("未登录，请先登录");

              that.$router.push({

                path: "/login"

              });

            }

          })

      },



      xiugais: function(shenme) {
        if(shenme == 'mima'){
          this.tit = '修改密码'
        }
        if(shenme == 'shoujihao'){
          this.tit = '绑定手机号'
        }
        if(shenme == 'mima'){
          this.tit = '修改密码'
        }

        this.xiugaishenme = shenme

        this.log = true

      },

      //获取验证码

      getcode: function(type) {

        if (this.form.mobilezhen == "") {

          this.$message.error('请先输入手机号');

        } else {

          var that = this;

          var params = new URLSearchParams();

          params.append('mobile', this.form.mobilezhen);
          if(type == 'zhuxiao'){
            params.append('type', 'off_code');
          }
          axios.post('/api/auth/sms_code', params)

            .then(response => {

              if (response.data.msg.code == 0) {

                this.$message({

                  message: '验证码已发送！',

                  type: 'success'

                });

                that.daojishi()

              } else {

                this.$message.error(response.data.msg.info);

              }

            })

        }

      },

      //倒计时功能

      daojishi: function() {

        var interval;

        interval = window.setInterval(() => {

          if (this.count <= 0) {

            window.clearInterval(interval)

            this.tishi = "获取验证码",

              this.jinyong = false

            this.count = 60

          } else {

            this.count -= 1;

            this.tishi = this.count + "秒重新获取"

            this.jinyong = true

          }

        }, 1000);

      },



      fixmima: function() {

        axios.post('/api/plan-market/password/reset', {

            id: this.form.id,

            password: this.form.pass

          })

          .then(response => {

            if (response.data.msg.code == 0) {

              this.form.pass = ""

              this.$message({

                type: 'success',

                message: '修改信息成功!'

              });

              this.chushihua()

            } else {

              this.$message.error(response.data.msg.info);

            }

          })

      },



      //修改账户信息

      fixpersongo: function() {

        var that = this

        axios.post('/api/plan-market/user/info', {

            sms_code: this.code,

            com: this.gongsiming

          })

          .then(response => {

            if (response.data.msg.code == 0) {

              this.$message({

                type: 'success',

                message: '修改信息成功!'

              });

              this.log = false

              this.chushihua()

            } else {

              this.$message.error(response.data.msg.info);

            }

          })

      },

      fixpersongo2: function() {

        var that = this

        axios.post('/api/plan-market/user/info', {

            sms_code: this.code,

            mobile: this.shoujihao

          })

          .then(response => {

            if (response.data.msg.code == 0) {

              this.$message({

                type: 'success',

                message: '修改信息成功!'

              });

              this.log = false

              this.chushihua()

            } else {

              this.$message.error(response.data.msg.info);

            }

          })

      },

      fixpersongo3: function() {

        var that = this

        if (this.mima != this.mima2) {

          this.$message.error('两次密码输入不同');

          return false

        }

        const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>]).{8,16}$/;
        if(this.shop_id == 357252 || this.shop_id == 50481 || this.shop_id == 606647 || this.shop_id == 305030 || this.shop_id == 276631 || this.shop_id == 304373 ){
          if(!regex.test(this.mima)){
            this.$message.error('密码需要大小写字母、特殊字符、数字组合且8-16位');
            return false
          }
        }




        axios.post('/api/plan-market/shop/pwd/reset', {

            sms_code: this.code,

            password: this.mima,

            name: this.form.name,

            mobile: this.form.mobilezhen

          })

          .then(response => {

            if (response.data.msg.code == 0) {

              this.$message({

                type: 'success',

                message: '修改信息成功!'

              });

              this.log = false

              this.chushihua()

            } else {

              this.$message.error(response.data.msg.info);

            }

          })

      },

    }

  }
</script>



<style lang="scss" scoped>
  .index {
    /deep/ .el-select {
          min-width: 250px;
          max-width: 100%;
          margin-right: 20px;
        }

        /deep/ .el-input {
          min-width: 250px;
          max-width: 100%;
          margin-right: 20px;
        }

        /deep/ .el-input__inner {
          line-height: 36px;
          height: 36px;
          font-size: 12px;
          background: rgb(247, 248, 250);
          border: 0;
        }

        /deep/ .el-range-editor .el-range-input {
          background: #f7f8fa;
        }

        /deep/ .el-button {
          padding: 11px 23px !important;
        }

        /deep/ .el-button--text {
          padding: 11px 0 !important;
        }

        /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
        }

        /deep/ .el-input__inner:-moz-placeholder {
          color: rgb(140, 140, 140);
        }

        /deep/ .el-input__inner:-ms-input-placeholder {
          color: rgb(140, 140, 140);
        }

        /deep/ .el-input__inner::-webkit-input-placeholder {
          color: rgb(140, 140, 140);
        }

        /deep/ .td2 .el-button {
          padding: 11px 0px !important;
        }

        /deep/ .pagination-container .el-select {
          width: 120px;
          margin-right: 20px;
        }

        /deep/ .pagination-container .el-input {
          width: 120px;
          margin-right: 20px;
        }

        /deep/ .pagination-container .el-input__inner {
          line-height: 28px;
          height: 28px;
        }

        /deep/ .el-pagination.is-background .btn-prev:disabled {
          background: rgba(246, 246, 246, 0.3);
          border: 1px rgba(167, 167, 167, 0.3) solid;
        }

        /deep/ .el-pagination.is-background .btn-next:disabled {
          background: rgba(246, 246, 246, 0.3);
          border: 1px rgba(167, 167, 167, 0.3) solid;
        }

        /deep/ .el-pagination.is-background .btn-next {
          background: rgba(246, 246, 246, 1);
          border: 1px rgba(167, 167, 167, 1) solid;
        }

        /deep/ .el-pagination.is-background .btn-prev {
          background: rgba(246, 246, 246, 1);
          border: 1px rgba(167, 167, 167, 1) solid;
        }

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background-color: #2974FF;
        }

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
          color: #fff;
        }

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
          color: #2974FF;
        }

        /deep/ .el-pager li {
          border-radius: 14px;
          background: rgba(255, 255, 255, 1);
          border: 1px rgba(167, 167, 167, 0.3) solid;
        }

        /deep/ .btn-prev {
          border-radius: 14px;
          padding: 0 10px;
        }

        /deep/ .btn-next {
          border-radius: 14px;
          padding: 0 10px;
        }


    .title {

      border-bottom: 1px #EAEAEA solid;

      line-height: 45px;

      padding-left: 30px;

      font-size: 16px;

      background: #F9F9F9;

      color: #727272
    }





    .con {

      padding-top: 30px;

    }




  }
</style>
